"use client";
import { Suspense, lazy, memo } from "react";
import { produce } from "immer";
import Icon from "./Icon";
import { initvalue } from "./common/utils";
import { context } from "./common/context";
import Loading from "@/app/components/Loading";

// import Tpl1 from './templates/tpl1/index';
// import Tpl2 from './templates/tpl2/index';
// import Tpl3 from './templates/tpl3/index';
// import Tpl4 from './templates/tpl4/index';
// import Tpl5 from './templates/tpl5/index';
// import Tpl6 from './templates/tpl6/index';
// import Tpl7 from './templates/tpl7/index';
// import Tpl8 from './templates/tpl8/index';
// import Tpl9 from './templates/tpl9/index';
// import Tpl10 from './templates/tpl10/index';
// import Tpl11 from './templates/tpl11/index';
// import Tpl12 from './templates/tpl12/index';
// import Tpl13 from './templates/tpl13/index';

// import Tpl14 from './templates/tpl14/index';

export interface IProps {
  resume: Resumes;
  onChange?: (htmlString: string) => void;
  onReady?: (pageNum: number) => void;
  fontScale: number;
  isNeedPaging?: boolean;
  from?: string;
  heightAuto?: boolean;
}

const Tpl1 = lazy(async () => {
  return import("./templates/tpl1");
});
const Tpl2 = lazy(async () => {
  return import("./templates/tpl2");
});
const Tpl3 = lazy(async () => {
  return import("./templates/tpl3");
});
const Tpl4 = lazy(async () => {
  return import("./templates/tpl4");
});
const Tpl5 = lazy(async () => {
  return import("./templates/tpl5");
});
const Tpl6 = lazy(async () => {
  return import("./templates/tpl6");
});
const Tpl7 = lazy(async () => {
  return import("./templates/tpl7");
});
// import Tpl7 from "./templates/tpl7";
const Tpl8 = lazy(async () => {
  return import("./templates/tpl8");
});
const Tpl9 = lazy(async () => {
  return import("./templates/tpl9");
});
const Tpl10 = lazy(async () => {
  return import("./templates/tpl10");
});
const Tpl11 = lazy(async () => {
  return import("./templates/tpl11");
});
const Tpl12 = lazy(async () => {
  return import("./templates/tpl12");
});
const Tpl13 = lazy(async () => {
  return import("./templates/tpl13");
});
const Temps = {
  tpl1: Tpl1,
  tpl2: Tpl2,
  tpl3: Tpl3,
  tpl4: Tpl4,
  tpl5: Tpl5,
  tpl6: Tpl6,
  tpl7: Tpl7,
  tpl8: Tpl8,
  tpl9: Tpl9,
  tpl10: Tpl10,
  tpl11: Tpl11,
  tpl12: Tpl12,
  tpl13: Tpl13,
};
function getTemp(props: IProps) {
  context.resume = {
    ...props.resume,
    content: produce(props.resume.content, (draft) => {
      Object.keys(draft).forEach((key: string) => {
        const section = key as Sections;
        if (draft[section]) {
          draft[section].entries = draft[section].entries.filter((item) => {
            return !item.isHidden;
          });
          if (!draft[section].entries.length) {
            delete draft[key];
          }
        }
      });
    }),
  };

  context.fontScale = props.fontScale;
  context.from = props.from;
  context.onReady = props.onReady;
  context.onChange = props.onChange;
  context.isNeedPaging = props.isNeedPaging;
  context.heightAuto = props.heightAuto;
  const Comp = Temps[props?.resume.customization?.template];
  if (Comp) {
    return <Comp />;
  } else {
    return null;
  }
}

function Comp(props: IProps) {
  // if (props.isNeedPaging) {
  //   return (
  //     <Suspense
  //       fallback={
  //         <div
  //           style={{
  //             width: "820px",
  //             height: "100vh",
  //             display: "flex",
  //             justifyContent: "center",
  //             alignItems: "center",
  //             overflow: "hidden",
  //           }}
  //         >
  //           <Loading
  //             style={{ position: "relative", background: "tranparent" }}
  //           />
  //         </div>
  //       }
  //     >
  //       {getTemp(props)}
  //     </Suspense>
  //   );
  // }
  return getTemp(props);
}
const Component = memo(Comp, (o, n) => {
  return JSON.stringify(o) === JSON.stringify(n);
});
export { Component, Icon, initvalue, getTemp };
